<template>
  <div class="design-editor-full-page">
    <!-- Top tab navigation -->
    <div class="editor-tabs">
      <div class="editor-tabs-left">
        <div 
          v-for="tab in ['template', 'text', 'material', 'preview', 'layers']" 
          :key="tab"
          class="tab" 
          :class="{ active: activeTab === tab }"
          @click="switchTab(tab)"
        >
          {{ tab === 'template' ? '模版' : 
             tab === 'text' ? '文字' : 
             tab === 'material' ? '素材' : 
             tab === 'preview' ? '预览' : '图层' }}
        </div>
      </div>
      <div class="editor-tabs-right">
        <button class="editor-button" @click="saveDesign">保存</button>
        <button class="editor-button primary" @click="exportDesign">导出</button>
      </div>
    </div>
    
    <!-- Main Content Area -->
    <div class="editor-main">
      <!-- Left Sidebar -->
      <div class="editor-sidebar" :class="{ 'collapsed': leftSidebarCollapsed }">
        <!-- Sidebar content changes based on active tab -->
        
        <!-- "模版" 标签内容 -->
        <div v-if="activeTab === 'template'" class="sidebar-content">
          <h3>设计模板库</h3>
          <div class="template-grid">
            <div 
              v-for="template in designTemplates" 
              :key="template.name" 
              class="template-item"
              @click="applyDesignTemplate(template)"
            >
              <img :src="template.thumbnail" :alt="template.name">
              <div class="template-name">{{ template.name }}</div>
            </div>
          </div>
          
          <h3>商业模板</h3>
          <div class="template-section">
            <div class="template-card" @click="applyTemplate({name:'电商Banner'})">
              <div class="template-icon">🛒</div>
              <div class="template-title">电商Banner</div>
            </div>
            <div class="template-card" @click="applyTemplate({name:'促销海报'})">
              <div class="template-icon">🏷️</div>
              <div class="template-title">促销海报</div>
            </div>
            <div class="template-card" @click="applyTemplate({name:'产品展示'})">
              <div class="template-icon">📱</div>
              <div class="template-title">产品展示</div>
            </div>
          </div>
          
          <h3>社交媒体模板</h3>
          <div class="template-section">
            <div class="template-card" @click="applyTemplate({name:'朋友圈封面'})">
              <div class="template-icon">📱</div>
              <div class="template-title">朋友圈封面</div>
            </div>
            <div class="template-card" @click="applyTemplate({name:'微博卡片'})">
              <div class="template-icon">🔥</div>
              <div class="template-title">微博卡片</div>
            </div>
            <div class="template-card" @click="applyTemplate({name:'视频封面'})">
              <div class="template-icon">🎬</div>
              <div class="template-title">视频封面</div>
            </div>
          </div>
        </div>
        
        <!-- "文字" 标签内容 -->
        <div v-if="activeTab === 'text'" class="sidebar-content">
          <h3>添加文字</h3>
          <div class="text-templates">
            <div class="text-template" @click="addHeading">
              <div class="text-preview heading">标题文本</div>
              <div class="text-name">大标题</div>
            </div>
            <div class="text-template" @click="addSubheading">
              <div class="text-preview subheading">副标题文本</div>
              <div class="text-name">副标题</div>
            </div>
            <div class="text-template" @click="addParagraph">
              <div class="text-preview paragraph">这是一段文字段落...</div>
              <div class="text-name">正文段落</div>
            </div>
          </div>
          
          <h3>文字样式</h3>
          <div class="text-styles">
            <div class="text-style-controls">
              <button class="style-button" @click="applyTextStyle('bold')">
                <span class="font-bold">B</span>
              </button>
              <button class="style-button" @click="applyTextStyle('italic')">
                <span class="font-italic">I</span>
              </button>
              <button class="style-button" @click="applyTextStyle('underline')">
                <span class="font-underline">U</span>
              </button>
            </div>
            
            <div class="font-selector">
              <label>字体:</label>
              <select v-model="defaultFontFamily">
                <option value="Arial">Arial</option>
                <option value="Times New Roman">Times New Roman</option>
                <option value="Helvetica">Helvetica</option>
                <option value="微软雅黑">微软雅黑</option>
                <option value="宋体">宋体</option>
              </select>
            </div>
            
            <div class="color-picker">
              <label>文字颜色:</label>
              <input type="color" v-model="selectedColor" @change="setColor(selectedColor)">
            </div>
          </div>
          
          <h3>特效文字</h3>
          <div class="text-effects">
            <div class="text-effect" @click="applyTemplate({name:'渐变文字'})">
              <div class="effect-preview gradient-text">渐变文字</div>
              <div class="effect-name">渐变效果</div>
            </div>
            <div class="text-effect" @click="applyTemplate({name:'阴影文字'})">
              <div class="effect-preview shadow-text">阴影文字</div>
              <div class="effect-name">阴影效果</div>
            </div>
            <div class="text-effect" @click="applyTemplate({name:'描边文字'})">
              <div class="effect-preview stroke-text">描边文字</div>
              <div class="effect-name">描边效果</div>
            </div>
          </div>
        </div>
        
        <!-- "素材" 标签内容 -->
        <div v-if="activeTab === 'material'" class="sidebar-content">
          <h3>基础形状</h3>
          <div class="shape-tools">
            <div class="tool-item" @click="addRectangle">
              <div class="tool-icon">■</div>
              <div class="tool-name">矩形</div>
            </div>
            <div class="tool-item" @click="addCircle">
              <div class="tool-icon">●</div>
              <div class="tool-name">圆形</div>
            </div>
            <div class="tool-item" @click="addTriangle">
              <div class="tool-icon">▲</div>
              <div class="tool-name">三角形</div>
            </div>
            <div class="tool-item" @click="addPolygon">
              <div class="tool-icon">⬡</div>
              <div class="tool-name">多边形</div>
            </div>
            <div class="tool-item" @click="drawLine">
              <div class="tool-icon">╱</div>
              <div class="tool-name">直线</div>
            </div>
          </div>
          
          <h3>设计素材</h3>
          <div class="material-grid">
            <div 
              v-for="material in materials" 
              :key="material.name" 
              class="material-item"
              @click="addMaterial(material)"
            >
              <img :src="material.url" :alt="material.name">
              <div class="material-name">{{ material.name }}</div>
            </div>
          </div>
          
          <h3>上传图片</h3>
          <div class="upload-section">
            <button class="upload-button">
              选择图片
              <input type="file" accept="image/*" @change="handleImageUpload">
            </button>
            <div class="upload-hint">支持JPG、PNG、SVG格式</div>
          </div>
          
          <h3>背景设置</h3>
          <div class="background-settings">
            <div class="background-options">
              <label>
                <input type="radio" v-model="backgroundType" value="color">
                纯色背景
              </label>
              <label>
                <input type="radio" v-model="backgroundType" value="transparent">
                透明背景
              </label>
            </div>
            
            <div v-if="backgroundType === 'color'" class="color-picker">
              <label>背景色:</label>
              <input type="color" v-model="backgroundColor" @change="setBackgroundColor(backgroundColor)">
            </div>
          </div>
        </div>
        
        <!-- "预览" 标签内容 -->
        <div v-if="activeTab === 'preview'" class="sidebar-content">
          <h3>预览设置</h3>
          <div class="preview-options">
            <div class="device-selector">
              <div>选择设备尺寸：</div>
              <div class="device-buttons">
                <button 
                  class="device-button" 
                  :class="{ active: previewDevice === 'desktop' }" 
                  @click="previewDevice = 'desktop'"
                >
                  电脑
                </button>
                <button 
                  class="device-button" 
                  :class="{ active: previewDevice === 'tablet' }" 
                  @click="previewDevice = 'tablet'"
                >
                  平板
                </button>
                <button 
                  class="device-button" 
                  :class="{ active: previewDevice === 'mobile' }" 
                  @click="previewDevice = 'mobile'"
                >
                  手机
                </button>
              </div>
              <div class="device-dimensions">{{ getPreviewDimensions() }}</div>
            </div>
            
            <button class="preview-button" @click="previewDesign">
              打开预览窗口
            </button>
          </div>
        </div>
        
        <!-- "图层" 标签内容 -->
        <div v-if="activeTab === 'layers'" class="sidebar-content">
          <h3>图层列表</h3>
          <div class="layers-list">
            <div 
              v-for="layer in layers" 
              :key="layer.id" 
              class="layer-item"
              :class="{ 'layer-selected': selectedObject === layer.object }"
              @click="canvas.setActiveObject(layer.object); canvas.renderAll();"
            >
              <div class="layer-controls">
                <button 
                  class="layer-visibility" 
                  :class="{ 'layer-visible': layer.visible }"
                  @click.stop="toggleLayerVisibility(layer.id)"
                >
                  👁️
                </button>
                <button 
                  class="layer-lock" 
                  :class="{ 'layer-locked': layer.locked }"
                  @click.stop="toggleLayerLock(layer.id)"
                >
                  🔒
                </button>
              </div>
              <div class="layer-name">{{ layer.name }}</div>
              <button 
                class="layer-delete" 
                @click.stop="removeLayer(layer.id)"
              >
                ❌
              </button>
            </div>
          </div>
        </div>
        
        <!-- 侧边栏收缩按钮 -->
        <div class="sidebar-collapse-button" @click="toggleLeftSidebar">
          {{ leftSidebarCollapsed ? '›' : '‹' }}
        </div>
      </div>
      
      <!-- Center Canvas Area -->
      <div class="editor-canvas-area">
        <div class="canvas-toolbar">
          <div class="toolbar-left">
            <button class="tool-button" @click="copySelected" title="复制">
              <span>📋</span>
            </button>
            <button class="tool-button" @click="cutSelected" title="剪切">
              <span>✂️</span>
            </button>
            <button class="tool-button" @click="pasteObject" title="粘贴">
              <span>📌</span>
            </button>
            <button class="tool-button" @click="deleteSelected" title="删除">
              <span>🗑️</span>
            </button>
            <button class="tool-button" @click="clearCanvas" title="清空画布">
              <span>🧹</span>
            </button>
          </div>
          <div class="toolbar-center">
            <!-- 撤回、恢复、放大、缩小、显示完整、原始比例 -->
            <button class="tool-button" @click="undo" title="撤回">
              <span>↩</span>
            </button>
            <button class="tool-button" @click="redo" title="恢复">
              <span>↪</span>
            </button>
            <button class="tool-button" @click="zoomIn" title="放大">
              <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                <circle cx="11" cy="11" r="8"></circle>
                <line x1="21" y1="21" x2="16.65" y2="16.65"></line>
                <line x1="11" y1="8" x2="11" y2="14"></line>
                <line x1="8" y1="11" x2="14" y2="11"></line>
              </svg>
            </button>
            <button class="tool-button" @click="zoomOut" title="缩小">
              <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                <circle cx="11" cy="11" r="8"></circle>
                <line x1="21" y1="21" x2="16.65" y2="16.65"></line>
                <line x1="8" y1="11" x2="14" y2="11"></line>
              </svg>
            </button>
            <button class="tool-button" @click="fitCanvas" title="显示完整">
              <span>⤢</span>
            </button>
            <button class="tool-button" @click="originalSize" title="原始比例">1:1</button>
          </div>
          <div class="toolbar-right">
            <button class="tool-button" @click="toggleGrid" title="显示网格">
              <span>📏</span>
            </button>
            <button class="tool-button" @click="toggleRuler" title="显示标尺">
              <span>📐</span>
            </button>
          </div>
        </div>
        
        <div class="canvas-wrapper">
          <canvas ref="fabricCanvas"></canvas>
        </div>
      </div>
      
      <!-- Right Properties Panel -->
      <div class="editor-properties" :class="{ 'collapsed': rightSidebarCollapsed }">
        <div class="properties-tabs">
          <div 
            class="property-tab" 
            :class="{ active: propertiesTab === 'properties' }"
            @click="propertiesTab = 'properties'"
          >
            属性
          </div>
          <div 
            class="property-tab"
            :class="{ active: propertiesTab === 'text2img' }"
            @click="propertiesTab = 'text2img'"
          >
            文生图
          </div>
          <div 
            class="property-tab"
            :class="{ active: propertiesTab === 'img2img' }"
            @click="propertiesTab = 'img2img'"
          >
            图生图
          </div>
        </div>
        
        <div class="properties-content">
          <!-- 属性标签页内容 -->
          <div v-if="propertiesTab === 'properties'">
            <!-- Object Properties -->
            <div v-if="selectedObject" class="property-section">
              <h3>对象属性</h3>
              
              <div class="property-group">
                <h4>位置与大小</h4>
                
                <div class="property-row">
                  <label>X:</label>
                  <input type="number" v-model="selectedObjectProps.left" @change="updateObjectProperty('left')">
                  <label>Y:</label>
                  <input type="number" v-model="selectedObjectProps.top" @change="updateObjectProperty('top')">
                </div>
                
                <div class="property-row">
                  <label>宽:</label>
                  <input type="number" v-model="selectedObjectProps.width" @change="updateObjectProperty('width')">
                  <label>高:</label>
                  <input type="number" v-model="selectedObjectProps.height" @change="updateObjectProperty('height')">
                </div>
                
                <div class="property-row">
                  <label>旋转:</label>
                  <input type="range" min="0" max="360" v-model="selectedObjectProps.angle" @change="updateObjectProperty('angle')">
                  <span>{{ selectedObjectProps.angle }}°</span>
                </div>
              </div>
              
              <div class="property-group">
                <h4>外观</h4>
                
                <div class="property-row">
                  <label>填充:</label>
                  <input type="color" v-model="selectedObjectProps.fill" @change="updateObjectProperty('fill')">
                </div>
                
                <div class="property-row">
                  <label>描边:</label>
                  <input type="color" v-model="selectedObjectProps.stroke" @change="updateObjectProperty('stroke')">
                  <label>宽度:</label>
                  <input type="number" min="0" max="20" v-model="selectedObjectProps.strokeWidth" @change="updateObjectProperty('strokeWidth')">
                </div>
                
                <div class="property-row">
                  <label>不透明度:</label>
                  <input type="range" min="0" max="1" step="0.01" v-model="selectedObjectProps.opacity" @change="updateObjectProperty('opacity')">
                  <span>{{ Math.round(selectedObjectProps.opacity * 100) }}%</span>
                </div>
              </div>
              
              <!-- Text specific properties -->
              <div v-if="isTextObject" class="property-group">
                <h4>文字属性</h4>
                
                <div class="property-row">
                  <label>文字:</label>
                  <textarea v-model="selectedObjectProps.text" @change="updateObjectProperty('text')"></textarea>
                </div>
                
                <div class="property-row">
                  <label>字体:</label>
                  <select v-model="selectedObjectProps.fontFamily" @change="updateObjectProperty('fontFamily')">
                    <option value="Arial">Arial</option>
                    <option value="Times New Roman">Times New Roman</option>
                    <option value="Helvetica">Helvetica</option>
                    <option value="微软雅黑">微软雅黑</option>
                    <option value="宋体">宋体</option>
                  </select>
                </div>
                
                <div class="property-row">
                  <label>大小:</label>
                  <input type="number" min="1" max="100" v-model="selectedObjectProps.fontSize" @change="updateObjectProperty('fontSize')">
                </div>
                
                <div class="property-row text-formats">
                  <button 
                    class="format-button" 
                    :class="{ active: selectedObjectProps.fontWeight === 'bold' }"
                    @click="toggleTextStyle('fontWeight', 'bold')"
                  >B</button>
                  <button 
                    class="format-button" 
                    :class="{ active: selectedObjectProps.fontStyle === 'italic' }"
                    @click="toggleTextStyle('fontStyle', 'italic')"
                  >I</button>
                  <button 
                    class="format-button" 
                    :class="{ active: selectedObjectProps.underline }"
                    @click="toggleTextStyle('underline', true)"
                  >U</button>
                </div>
                
                <div class="property-row">
                  <label>对齐:</label>
                  <div class="alignment-buttons">
                    <button 
                      class="align-button" 
                      :class="{ active: selectedObjectProps.textAlign === 'left' }"
                      @click="updateObjectProperty('textAlign', 'left')"
                    >
                      左对齐
                    </button>
                    <button 
                      class="align-button" 
                      :class="{ active: selectedObjectProps.textAlign === 'center' }"
                      @click="updateObjectProperty('textAlign', 'center')"
                    >
                      居中
                    </button>
                    <button 
                      class="align-button" 
                      :class="{ active: selectedObjectProps.textAlign === 'right' }"
                      @click="updateObjectProperty('textAlign', 'right')"
                    >
                      右对齐
                    </button>
                  </div>
                </div>
              </div>
            </div>
          </div>
          
          <!-- 文生图标签页内容 -->
          <div v-if="propertiesTab === 'text2img'" class="ai-panel">
            <div class="property-section">
              <h3>文生图</h3>
              <div class="property-group">
                <div class="property-row">
                  <label>提示词:</label>
                  <textarea v-model="aiText2ImgParams.prompt" placeholder="描述您想要生成的图像..."></textarea>
                </div>
                
                <div class="property-row">
                  <label>负面提示:</label>
                  <textarea v-model="aiText2ImgParams.negative_prompt" placeholder="不希望出现的内容..."></textarea>
                </div>
                
                <div class="property-row">
                  <label>模型:</label>
                  <select v-model="aiText2ImgParams.model">
                    <option value="sdxl">Stable Diffusion XL</option>
                    <option value="sd15">Stable Diffusion 1.5</option>
                    <option value="midjourney">Midjourney 风格</option>
                  </select>
                </div>
                
                <div class="property-row">
                  <label>创造力:</label>
                  <input type="range" min="1" max="15" v-model="aiText2ImgParams.cfg_scale">
                  <span>{{ aiText2ImgParams.cfg_scale }}</span>
                </div>
                
                <div class="property-row">
                  <label>尺寸:</label>
                  <select v-model="aiText2ImgParams.size">
                    <option value="512x512">512x512</option>
                    <option value="768x768">768x768</option>
                    <option value="1024x1024">1024x1024</option>
                  </select>
                </div>
                
                <div class="property-row seed-input">
                  <label>种子:</label>
                  <input type="number" v-model="aiText2ImgParams.seed">
                  <button @click="aiText2ImgParams.seed = Math.floor(Math.random() * 1000000)" class="tool-button">🎲</button>
                </div>
                
                <button class="ai-generate-button" @click="generateAiImage">生成图像</button>
              </div>
              
              <div v-if="generatedImages.length > 0" class="generated-images">
                <h4>生成结果</h4>
                <div class="image-grid">
                  <div 
                    v-for="image in generatedImages" 
                    :key="image.id" 
                    class="generated-image-item"
                    @click="addGeneratedImageToCanvas(image)"
                  >
                    <img :src="image.url" :alt="image.prompt">
                    <div class="image-actions">
                      <button class="image-action-button">添加到画布</button>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
          
          <!-- 图生图标签页内容 -->
          <div v-if="propertiesTab === 'img2img'" class="ai-panel">
            <div class="property-section">
              <h3>图生图</h3>
              <div class="property-group">
                <div class="property-row">
                  <label>参考图:</label>
                  <div class="upload-reference">
                    <button class="upload-button">
                      选择图片
                      <input type="file" accept="image/*" @change="handleReferenceImageUpload">
                    </button>
                  </div>
                </div>
                
                <div v-if="aiImg2ImgParams.referenceImage" class="reference-image-preview">
                  <img :src="aiImg2ImgParams.referenceImage" alt="参考图">
                </div>
                
                <div class="property-row">
                  <label>提示词:</label>
                  <textarea v-model="aiImg2ImgParams.prompt" placeholder="描述您想要修改的内容..."></textarea>
                </div>
                
                <div class="property-row">
                  <label>变化强度:</label>
                  <input type="range" min="0" max="1" step="0.01" v-model="aiImg2ImgParams.denoising_strength">
                  <span>{{ aiImg2ImgParams.denoising_strength }}</span>
                </div>
                
                <div class="property-row">
                  <label>创造力:</label>
                  <input type="range" min="1" max="15" v-model="aiImg2ImgParams.cfg_scale">
                  <span>{{ aiImg2ImgParams.cfg_scale }}</span>
                </div>
                
                <button class="ai-generate-button" @click="generateImg2ImgImage">生成图像</button>
              </div>
              
              <div v-if="generatedImg2ImgImages.length > 0" class="generated-images">
                <h4>生成结果</h4>
                <div class="image-grid">
                  <div 
                    v-for="image in generatedImg2ImgImages" 
                    :key="image.id" 
                    class="generated-image-item"
                    @click="addGeneratedImageToCanvas(image)"
                  >
                    <img :src="image.url" :alt="image.prompt">
                    <div class="image-actions">
                      <button class="image-action-button">添加到画布</button>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
        
        <!-- 侧边栏收缩按钮 -->
        <div class="sidebar-collapse-button right" @click="toggleRightSidebar">
          {{ rightSidebarCollapsed ? '‹' : '›' }}
        </div>
      </div>
    </div>
  </div>
</template>

<script>
// 删除旧的直接引用
// import * as fabric from "fabric";

// 导入我们新实现的服务
import { imageEditorService } from '@/services/image-editor.service';
import { aiService } from '@/services/ai-service';
import { fileToDataURL } from '@/services/utils/imageUtils';

export default {
  // ... existing code ...
  data() {
    return {
      // ... existing code ...
      fabricCanvas: null,
      // 添加编辑器服务引用
      editorService: null,
      // ... existing code ...
    };
  },
  mounted() {
    this.initEditor();
    // ... existing code ...
  },
  methods: {
    switchTab(tab) {
      this.activeTab = tab;
    },
    async initEditor() {
      try {
        // 初始化编辑器服务
        this.editorService = imageEditorService;
        await this.editorService.init(this.$refs.fabricCanvas, {
          width: this.workspaceWidth,
          height: this.workspaceHeight,
          backgroundColor: this.workspaceBackground
        });
        
        // 设置回调函数
        this.editorService.setCallbacks({
          onReady: (editor) => {
            this.canvas = editor.canvas;
            console.log('编辑器已初始化', editor);
          },
          onChange: () => {
            this.saveCurrentState();
          },
          onImageAdded: (img) => {
            console.log('图像已添加', img);
          }
        });
      } catch (error) {
        console.error('初始化编辑器失败:', error);
      }
    },
    // 添加标题文本
    addHeading() {
      const plugin = this.editorService.editor.getPlugin('TextPlugin');
      plugin.addText('标题文本', {
    fontSize: 36,
    fontWeight: 'bold',
        left: 100,
        top: 100,
        fill: this.defaultTextColor
      });
    },
    // 添加副标题文本
    addSubheading() {
      const plugin = this.editorService.editor.getPlugin('TextPlugin');
      plugin.addText('副标题文本', {
        fontSize: 24,
        fontWeight: 'normal',
    left: 100,
    top: 150,
        fill: this.defaultTextColor
      });
    },
    // 添加段落文本
    addParagraph() {
      const plugin = this.editorService.editor.getPlugin('TextPlugin');
      plugin.addTextbox('这是一段文字段落，您可以根据需要修改内容。文字段落可以包含较长的内容描述，适合详细说明。', {
        fontSize: 16,
    left: 100,
    top: 200,
    width: 300,
        fill: this.defaultTextColor
      });
    },
    // 应用文本样式
    applyTextStyle(style) {
      const activeObject = this.canvas.getActiveObject();
      if (!activeObject || !activeObject.isType('text')) return;

      switch (style) {
        case 'bold':
          activeObject.set('fontWeight', activeObject.fontWeight === 'bold' ? 'normal' : 'bold');
          break;
        case 'italic':
          activeObject.set('fontStyle', activeObject.fontStyle === 'italic' ? 'normal' : 'italic');
          break;
        case 'underline':
          activeObject.set('underline', !activeObject.underline);
          break;
      }
      this.canvas.renderAll();
    },
    // 设置颜色
    setColor(color) {
      const activeObject = this.canvas.getActiveObject();
      if (!activeObject) return;

      activeObject.set('fill', color);
      this.canvas.renderAll();
    },
    // 添加矩形
    addRectangle() {
      const plugin = this.editorService.editor.getPlugin('ShapePlugin');
      plugin.addRectangle({
    left: 100,
    top: 100,
    width: 100,
    height: 100,
        fill: this.defaultShapeFill,
        stroke: this.defaultShapeStroke,
    strokeWidth: 1
  });
    },
    // 添加圆形
    addCircle() {
      const plugin = this.editorService.editor.getPlugin('ShapePlugin');
      plugin.addCircle({
    left: 100,
    top: 100,
    radius: 50,
        fill: this.defaultShapeFill,
        stroke: this.defaultShapeStroke,
    strokeWidth: 1
  });
    },
    // 添加三角形
    addTriangle() {
      const plugin = this.editorService.editor.getPlugin('ShapePlugin');
      plugin.addTriangle({
    left: 100,
    top: 100,
    width: 100,
    height: 100,
        fill: this.defaultShapeFill,
        stroke: this.defaultShapeStroke,
    strokeWidth: 1
  });
    },
    // 添加多边形
    addPolygon() {
      const plugin = this.editorService.editor.getPlugin('ShapePlugin');
      plugin.addPolygon([
        { x: 0, y: 0 },
    { x: 50, y: 0 },
        { x: 75, y: 50 },
    { x: 50, y: 100 },
        { x: 0, y: 100 },
        { x: -25, y: 50 }
  ], {
    left: 100,
    top: 100,
        fill: this.defaultShapeFill,
        stroke: this.defaultShapeStroke,
    strokeWidth: 1
  });
    },
    // 绘制直线
    drawLine() {
      const plugin = this.editorService.editor.getPlugin('ShapePlugin');
      plugin.addLine([50, 50, 200, 200], {
        stroke: this.defaultShapeStroke,
    strokeWidth: 2
  });
    },
    // 处理图片上传
    async handleImageUpload(event) {
  const file = event.target.files[0];
  if (!file) return;
  
      try {
        await this.editorService.loadImageFromFile(file);
      } catch (error) {
        console.error('上传图片失败:', error);
      }
    },
    // 添加素材
    async addMaterial(material) {
      try {
        if (material.type === 'svg') {
          // 使用Fabric.js直接处理SVG
          const plugin = this.editorService.editor.getPlugin('ImagePlugin');
          await plugin.addImage(material.url);
  } else {
          // 添加普通图像
          await this.editorService.loadImage(material.url);
        }
      } catch (error) {
        console.error('添加素材失败:', error);
      }
    },
    // 设置背景色
    setBackgroundColor(color) {
      this.workspaceBackground = color;
      this.editorService.setBackgroundColor(color);
    },
    // 设置背景图
    async setBackgroundImage(imageUrl) {
      try {
        this.canvas.setBackgroundImage(
          imageUrl,
          this.canvas.renderAll.bind(this.canvas),
          {
            scaleX: this.canvas.width / this.backgroundImageWidth,
            scaleY: this.canvas.height / this.backgroundImageHeight
          }
        );
      } catch (error) {
        console.error('设置背景图片失败:', error);
      }
    },
    // 应用设计模板
    applyDesignTemplate(template) {
      // 清除当前设计
      this.canvas.clear();
      
      // 设置背景色
      this.editorService.setBackgroundColor(template.backgroundColor || '#ffffff');
      
      // 应用模板对象
      if (template.objects && template.objects.length) {
        // 实现模板对象添加逻辑...
      }
    },
    // 保存设计
    async saveDesign() {
      try {
        const dataURL = await this.editorService.exportToImage({
          format: 'png',
          quality: 0.8
        });
        
        // 实现保存逻辑...
        console.log('设计已保存', dataURL);
      } catch (error) {
        console.error('保存设计失败:', error);
      }
    },
    // 导出设计
    async exportDesign() {
      try {
        const dataURL = await this.editorService.exportToImage({
          format: this.exportFormat || 'png',
          quality: this.exportQuality || 0.8
        });
        
        // 创建下载链接
  const link = document.createElement('a');
  link.href = dataURL;
        link.download = `design-${Date.now()}.${this.exportFormat || 'png'}`;
        document.body.appendChild(link);
  link.click();
        document.body.removeChild(link);
      } catch (error) {
        console.error('导出设计失败:', error);
      }
    },
    // 保存当前状态
    saveCurrentState() {
      // 实现历史记录保存逻辑...
    },
    // ... existing code ...
  }
};
</script>

<style scoped>
/* 侧边栏收缩按钮 */
.sidebar-collapse-button {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 24px;
  height: 60px;
  background-color: #fff;
  border: 1px solid #e0e0e0;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 20;
  font-size: 18px;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
  transition: all 0.3s;
  /* 左侧栏的收缩按钮靠近右边界 */
  right: 0;
  border-radius: 30px 0 0 30px;
  border-right: none;
}

.sidebar-collapse-button:hover {
  background-color: #f0f0f0;
}

/* 右侧栏的收缩按钮 */
.sidebar-collapse-button.right {
  /* 右侧栏的收缩按钮靠近左边界 */
  right: auto;
  left: 0;
  border-radius: 0 30px 30px 0;
  border-left: none;
}

/* 侧边栏折叠状态 */
.editor-sidebar.collapsed {
  width: 0;
  min-width: 0;
  padding: 0;
  border-right: none;
  overflow: visible; /* 改为visible确保按钮可见 */
}

.editor-properties.collapsed {
  width: 0;
  min-width: 0;
  padding: 0;
  border-left: none;
  overflow: visible; /* 改为visible确保按钮可见 */
}

.editor-sidebar.collapsed .sidebar-collapse-button {
  right: -24px;
  z-index: 30;
  background-color: #1890ff;
  color: white;
  width: 24px;
  height: 72px;
  font-size: 18px;
  border-color: #1890ff;
  border-radius: 0 30px 30px 0;
  border-left: none;
}

.editor-properties.collapsed .sidebar-collapse-button {
  left: -24px;
  z-index: 30;
  background-color: #1890ff;
  color: white;
  width: 24px;
  height: 72px;
  font-size: 18px;
  border-color: #1890ff;
  border-radius: 30px 0 0 30px;
  border-right: none;
}

.editor-sidebar.collapsed .sidebar-collapse-button:hover,
.editor-properties.collapsed .sidebar-collapse-button:hover {
  background-color: #40a9ff;
}

.design-editor-full-page {
  height: 100vh;
  width: 100vw;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 100;
  background-color: #fff;
}

/* Top tabs */
.editor-tabs {
  height: 48px;
  background-color: #fff;
  border-bottom: 1px solid #e0e0e0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 20px;
}

.editor-tabs-left {
  display: flex;
}

.tab {
  padding: 0 20px;
  height: 48px;
  line-height: 48px;
  cursor: pointer;
  position: relative;
  font-size: 14px;
  color: #666;
  transition: all 0.2s;
}

.tab.active {
  color: #1890ff;
  font-weight: 500;
}

.tab.active:after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 20%;
  width: 60%;
  height: 2px;
  background-color: #1890ff;
}

.tab:hover:not(.active) {
  color: #40a9ff;
}

.editor-tabs-right {
  display: flex;
  gap: 10px;
}

.editor-button {
  padding: 6px 12px;
  background-color: #fff;
  border: 1px solid #e0e0e0;
  border-radius: 4px;
  cursor: pointer;
  transition: all 0.2s;
}

.editor-button:hover {
  background-color: #f0f0f0;
}

.editor-button.primary {
  background-color: #1890ff;
  color: #fff;
  border-color: #1890ff;
}

.editor-button.primary:hover {
  background-color: #40a9ff;
}

.editor-main {
  display: flex;
  flex: 1;
  overflow: hidden;
}

/* Left sidebar */
.editor-sidebar {
  width: 280px;
  background-color: #f5f5f5;
  border-right: 1px solid #e0e0e0;
  overflow-y: auto;
  flex-shrink: 0; /* 防止侧边栏被压缩 */
  z-index: 10;
  position: relative;
  transition: width 0.3s ease;
}

.sidebar-content {
  padding: 15px;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.sidebar-content h3 {
  font-size: 16px;
  margin-bottom: 10px;
  color: #333;
  padding-bottom: 5px;
  border-bottom: 1px solid #e0e0e0;
}

.tool-items, .shape-tools {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.tool-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 60px;
  height: 60px;
  border: 1px solid #e0e0e0;
  border-radius: 4px;
  cursor: pointer;
  transition: all 0.2s;
  background-color: #fff;
}

.tool-item:hover {
  background-color: #f0f0f0;
  border-color: #1890ff;
  color: #1890ff;
}

.tool-icon, .tool-name {
  text-align: center;
}

.tool-icon {
  font-size: 24px;
  margin-bottom: 5px;
}

.tool-name {
  font-size: 12px;
}

.template-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
}

.template-item {
  overflow: hidden;
  border-radius: 4px;
  background-color: #fff;
  border: 1px solid #e0e0e0;
  cursor: pointer;
  transition: all 0.2s;
}

.template-item:hover {
  transform: translateY(-2px);
  box-shadow: 0 2px 8px rgba(24, 144, 255, 0.2);
  border-color: #1890ff;
}

.template-item img {
  width: 100%;
  height: 80px;
  object-fit: cover;
  display: block;
}

.template-name {
  padding: 5px;
  font-size: 12px;
  text-align: center;
  background-color: #fff;
  border-top: 1px solid #f0f0f0;
}

.template-section {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.template-card {
  flex: 1 0 calc(33.333% - 10px);
  min-width: 70px;
  height: 80px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background-color: #fff;
  border: 1px solid #e0e0e0;
  border-radius: 4px;
  cursor: pointer;
  padding: 10px 5px;
  transition: all 0.2s;
}

.template-card:hover {
  background-color: #f0f0f0;
  border-color: #1890ff;
  transform: translateY(-2px);
}

.template-icon {
  font-size: 24px;
  margin-bottom: 5px;
}

.template-title {
  font-size: 12px;
  text-align: center;
}

.text-templates {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.text-template {
  background-color: #fff;
  border: 1px solid #e0e0e0;
  border-radius: 4px;
  padding: 10px;
  cursor: pointer;
  transition: all 0.2s;
}

.text-template:hover {
  border-color: #1890ff;
  box-shadow: 0 2px 8px rgba(24, 144, 255, 0.15);
}

.text-preview {
  margin-bottom: 5px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.text-preview.heading {
  font-size: 18px;
  font-weight: bold;
}

.text-preview.subheading {
  font-size: 16px;
}

.text-preview.paragraph {
  font-size: 14px;
}

.text-name {
  font-size: 12px;
  color: #999;
}

.text-styles {
  display: flex;
  flex-direction: column;
  gap: 15px;
}

.text-style-controls {
  display: flex;
  gap: 10px;
}

.style-button {
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #fff;
  border: 1px solid #e0e0e0;
  border-radius: 4px;
  cursor: pointer;
  transition: all 0.2s;
}

.style-button:hover {
  background-color: #f0f0f0;
  border-color: #1890ff;
}

.font-selector, .color-picker {
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.font-selector select, .color-picker input[type="color"] {
  width: 100%;
  padding: 5px;
  border: 1px solid #e0e0e0;
  border-radius: 4px;
}

.text-effects {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.text-effect {
  flex: 1 0 calc(50% - 5px);
  background-color: #fff;
  border: 1px solid #e0e0e0;
  border-radius: 4px;
  padding: 10px;
  cursor: pointer;
  transition: all 0.2s;
}

.text-effect:hover {
  border-color: #1890ff;
  box-shadow: 0 2px 8px rgba(24, 144, 255, 0.15);
}

.effect-preview {
  margin-bottom: 5px;
  text-align: center;
  font-size: 16px;
}

.effect-preview.gradient-text {
  background: linear-gradient(to right, #f5222d, #fa8c16, #fadb14, #52c41a, #1890ff, #722ed1);
  -webkit-background-clip: text;
  color: transparent;
  font-weight: bold;
}

.effect-preview.shadow-text {
  text-shadow: 3px 3px 5px rgba(0, 0, 0, 0.3);
}

.effect-preview.stroke-text {
  -webkit-text-stroke: 1px #333;
  color: white;
}

.effect-name {
  font-size: 12px;
  color: #999;
  text-align: center;
}

.material-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}

.material-item {
  background-color: #fff;
  border: 1px solid #e0e0e0;
  border-radius: 4px;
  overflow: hidden;
  cursor: pointer;
  transition: all 0.2s;
}

.material-item:hover {
  transform: translateY(-2px);
  box-shadow: 0 2px 8px rgba(24, 144, 255, 0.2);
  border-color: #1890ff;
}

.material-item img {
  width: 100%;
  height: 60px;
  object-fit: contain;
  padding: 5px;
}

.material-name {
  font-size: 12px;
  text-align: center;
  padding: 5px;
  border-top: 1px solid #f0f0f0;
  background-color: #fff;
}

.upload-section {
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.upload-button {
  position: relative;
  background-color: #fff;
  border: 1px dashed #d9d9d9;
  border-radius: 4px;
  padding: 16px;
  text-align: center;
  cursor: pointer;
  transition: all 0.2s;
}

.upload-button:hover {
  border-color: #1890ff;
}

.upload-button input[type="file"] {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  cursor: pointer;
}

.upload-hint {
  font-size: 12px;
  color: #999;
  text-align: center;
}

.background-settings {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.background-options {
  display: flex;
  gap: 15px;
}

/* Preview options */
.preview-options {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.device-selector {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.device-buttons {
  display: flex;
  gap: 10px;
}

.device-button {
  flex: 1;
  padding: 8px;
  background-color: #fff;
  border: 1px solid #e0e0e0;
  border-radius: 4px;
  cursor: pointer;
  transition: all 0.2s;
}

.device-button.active {
  background-color: #1890ff;
  color: #fff;
  border-color: #1890ff;
}

.device-dimensions {
  text-align: center;
  font-size: 12px;
  color: #999;
}

.preview-button {
  background-color: #1890ff;
  color: #fff;
  border: none;
  border-radius: 4px;
  padding: 10px;
  cursor: pointer;
  transition: all 0.2s;
}

.preview-button:hover {
  background-color: #40a9ff;
}

/* Center canvas area */
.editor-canvas-area {
  flex: 1;
  display: flex;
  flex-direction: column;
  background-color: #e9e9e9;
  overflow: hidden;
}

.canvas-toolbar {
  height: 40px;
  padding: 0 15px;
  background-color: #fff;
  border-bottom: 1px solid #e0e0e0;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.toolbar-left, .toolbar-center, .toolbar-right {
  display: flex;
  gap: 10px;
}

.toolbar-center {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  background-color: #f5f5f5;
  border-radius: 4px;
  padding: 4px;
  box-shadow: 0 1px 3px rgba(0,0,0,0.1);
  border: 1px solid #e0e0e0;
}

.tool-button {
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #fff;
  border: 1px solid #e0e0e0;
  border-radius: 4px;
  cursor: pointer;
  transition: all 0.2s;
}

.tool-button:hover {
  background-color: #f0f0f0;
  border-color: #1890ff;
}

.canvas-wrapper {
  flex: 1;
  position: relative;
  overflow: auto;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
}

canvas {
  background-color: #ffffff;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

/* Right properties panel */
.editor-properties {
  width: 280px;
  background-color: #f5f5f5;
  border-left: 1px solid #e0e0e0;
  overflow-y: auto;
  flex-shrink: 0; /* 防止侧边栏被压缩 */
  position: relative;
  transition: width 0.3s ease;
}

.properties-tabs {
  display: flex;
  border-bottom: 1px solid #e0e0e0;
  background-color: #fff;
}

.property-tab {
  flex: 1;
  padding: 12px;
  text-align: center;
  cursor: pointer;
  font-size: 14px;
  color: #666;
  position: relative;
  transition: all 0.2s;
}

.property-tab:hover:not(.active) {
  color: #1890ff;
}

.property-tab.active {
  color: #1890ff;
  font-weight: 500;
}

.property-tab.active:after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 20%;
  width: 60%;
  height: 2px;
  background-color: #1890ff;
}

.properties-content {
  padding: 15px;
  overflow-y: auto;
  max-height: calc(100vh - 64px - 48px - 45px); /* 视口高度 - 头部 - 顶部标签 - 属性标签 */
}

.property-section {
  margin-bottom: 20px;
}

.property-section h3 {
  font-size: 16px;
  margin-bottom: 15px;
  color: #333;
  padding-bottom: 5px;
  border-bottom: 1px solid #e0e0e0;
}

.property-group {
  background-color: #fff;
  border-radius: 4px;
  padding: 12px;
  margin-bottom: 15px;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
}

.property-group h4 {
  font-size: 14px;
  margin-bottom: 12px;
  color: #333;
}

.property-row {
  display: flex;
  align-items: center;
  margin-bottom: 8px;
  gap: 8px;
}

.property-row label {
  min-width: 60px;
  font-size: 12px;
  color: #666;
}

.property-row input[type="number"],
.property-row input[type="text"],
.property-row select {
  flex: 1;
  height: 32px;
  border: 1px solid #d9d9d9;
  border-radius: 4px;
  padding: 4px 8px;
  font-size: 14px;
}

.property-row textarea {
  width: 100%;
  min-height: 60px;
  border: 1px solid #d9d9d9;
  border-radius: 4px;
  padding: 8px;
  font-size: 14px;
  resize: vertical;
}

.property-row input[type="range"] {
  flex: 1;
}

.property-row input[type="color"] {
  height: 32px;
  width: 32px;
  padding: 2px;
  border: 1px solid #d9d9d9;
  border-radius: 4px;
}

.text-formats {
  display: flex;
  gap: 5px;
}

.format-button {
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #fff;
  border: 1px solid #e0e0e0;
  border-radius: 4px;
  cursor: pointer;
  transition: all 0.2s;
}

.format-button.active {
  background-color: #1890ff;
  color: #fff;
  border-color: #1890ff;
}

.alignment-buttons {
  display: flex;
  gap: 5px;
}

.align-button {
  flex: 1;
  height: 32px;
  background-color: #fff;
  border: 1px solid #e0e0e0;
  border-radius: 4px;
  cursor: pointer;
  transition: all 0.2s;
  font-size: 12px;
}

.align-button.active {
  background-color: #1890ff;
  color: #fff;
  border-color: #1890ff;
}

/* AI Panel styles */
.ai-panel {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.seed-input {
  display: flex;
  align-items: center;
  gap: 10px;
}

.ai-generate-button {
  width: 100%;
  height: 40px;
  margin-top: 10px;
  background-color: #1890ff;
  color: #fff;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  font-size: 14px;
  transition: all 0.2s;
}

.ai-generate-button:hover {
  background-color: #40a9ff;
}

.generated-images {
  margin-top: 20px;
}

.image-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
  margin-top: 10px;
}

.generated-image-item {
  position: relative;
  border: 1px solid #e0e0e0;
  border-radius: 4px;
  overflow: hidden;
  cursor: pointer;
}

.generated-image-item img {
  width: 100%;
  display: block;
}

.generated-image-item .image-actions {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  background-color: rgba(0, 0, 0, 0.6);
  padding: 5px;
  display: flex;
  justify-content: center;
  opacity: 0;
  transition: opacity 0.2s;
}

.generated-image-item:hover .image-actions {
  opacity: 1;
}

.image-action-button {
  background-color: #1890ff;
  color: #fff;
  border: none;
  border-radius: 4px;
  padding: 4px 8px;
  font-size: 12px;
  cursor: pointer;
}

.reference-image-preview {
  margin-top: 10px;
  max-width: 100%;
  border: 1px solid #ddd;
  border-radius: 4px;
  overflow: hidden;
}

.reference-image-preview img {
  max-width: 100%;
  display: block;
}

.upload-reference {
  width: 100%;
}

@media (max-width: 1200px) {
  .editor-sidebar, .editor-properties {
    width: 250px;
  }
}

@media (max-width: 768px) {
  .editor-main {
    flex-direction: column;
  }
  
  .editor-sidebar, .editor-properties {
    width: 100%;
    max-height: 250px;
  }
}

/* Layers panel */
.layers-list {
  margin-top: 10px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.layer-item {
  display: flex;
  align-items: center;
  padding: 8px 10px;
  background-color: #fff;
  border: 1px solid #e0e0e0;
  border-radius: 4px;
  transition: all 0.2s;
}

.layer-item:hover {
  border-color: #40a9ff;
}

.layer-item.layer-selected {
  background-color: #e6f7ff;
  border-color: #1890ff;
}

.layer-controls {
  display: flex;
  gap: 5px;
  margin-right: 8px;
}

.layer-visibility,
.layer-lock {
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  opacity: 0.5;
  transition: opacity 0.2s;
}

.layer-visibility.layer-visible,
.layer-lock.layer-locked {
  opacity: 1;
}

.layer-name {
  flex: 1;
  font-size: 14px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.layer-delete {
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  opacity: 0.5;
  transition: opacity 0.2s;
}

.layer-delete:hover {
  opacity: 1;
}
</style>